<template>
  <div class="parallel-example">
    <h2>并行流程图示例</h2>
    <p class="description">展示并行分支和合并流程</p>
    
    <FlowGraph :nodes="nodes" :config="config" />
    
    <div class="info-panel">
      <h3>流程说明</h3>
      <div class="flow-steps">
        <div class="step">
          <span class="step-number">1</span>
          <div class="step-content">
            <strong>原料准备</strong>
            <p>准备加工所需原料</p>
          </div>
        </div>
        
        <div class="step">
          <span class="step-number">2</span>
          <div class="step-content">
            <strong>机械加工</strong>
            <p>启动三个并行分支</p>
          </div>
        </div>
        
        <div class="step parallel">
          <span class="step-icon">⇒</span>
          <div class="step-content">
            <strong>并行执行</strong>
            <ul>
              <li>质量检测（绿色分支）</li>
              <li>表面处理（绿色分支）</li>
              <li>热处理（绿色分支）</li>
            </ul>
          </div>
        </div>
        
        <div class="step merge">
          <span class="step-icon">⇐</span>
          <div class="step-content">
            <strong>并行合并</strong>
            <p>等待所有分支完成后汇聚（橙色合并）</p>
          </div>
        </div>
        
        <div class="step">
          <span class="step-number">3</span>
          <div class="step-content">
            <strong>最终检验</strong>
            <p>对产品进行最终检验</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import FlowGraph from '../FlowGraph.vue';

const config = {
  nodeWidth: 160,
  nodeHeight: 100,
  horizontalSpacing: 240,
  verticalSpacing: 140,
  showLegend: true,
};

const nodes = [
  {
    id: '1',
    title: '原料准备',
    description: '准备加工原料',
    nextNodeIds: '2',
  },
  {
    id: '2',
    title: '机械加工',
    description: '机械切削加工',
    preNodeIds: '1',
    nextNodeIds: '3,4,5', // 并行分支
  },
  {
    id: '3',
    title: '质量检测',
    description: '质量检测和测量',
    preNodeIds: '2',
    nextNodeIds: '6',
  },
  {
    id: '4',
    title: '表面处理',
    description: '表面喷涂处理',
    preNodeIds: '2',
    nextNodeIds: '6',
  },
  {
    id: '5',
    title: '热处理',
    description: '热处理加工',
    preNodeIds: '2',
    nextNodeIds: '6',
  },
  {
    id: '6',
    title: '最终检验',
    description: '产品最终检验',
    preNodeIds: '3,4,5', // 并行合并
  },
];
</script>

<style scoped>
.parallel-example {
  padding: 20px;
}

h2 {
  color: #333;
  margin-bottom: 8px;
}

.description {
  color: #666;
  margin-bottom: 20px;
}

.info-panel {
  margin-top: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.info-panel h3 {
  margin-top: 0;
  margin-bottom: 16px;
  color: #333;
}

.flow-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.step {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: white;
  border-radius: 6px;
  border-left: 3px solid #714b67;
}

.step.parallel {
  border-left-color: #52c41a;
  background: #f6ffed;
}

.step.merge {
  border-left-color: #fa8c16;
  background: #fff7e6;
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #714b67;
  color: white;
  font-weight: bold;
  flex-shrink: 0;
}

.step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 20px;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
}

.step-content strong {
  display: block;
  color: #333;
  margin-bottom: 4px;
}

.step-content p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.step-content ul {
  margin: 4px 0 0 0;
  padding-left: 20px;
  color: #666;
  font-size: 14px;
}

.step-content li {
  margin: 2px 0;
}
</style>

